<template>
    <el-dialog :model-value="isShow" title="分配用户" @close="emit('hide')">
        <el-form ref="formRef" :model="form" :rules="rules">
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入角色名称" autocomplete="off" />
            </el-form-item>
            <el-form-item style="text-indent: 2em;" label="描述">
                <el-input v-model="form.description" placeholder="请输入描述" :row="4" type="textarea" autocomplete="off" />
            </el-form-item>
            <el-form-item label="是否启用">
                <el-radio-group v-model="form.status" class="ml-4">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emit('hide')">取消</el-button>
                <el-button type="primary" @click="submitFn">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang='ts'>
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { reactive, ref, watch } from 'vue';
import { createUser, roleupDataUser } from './api';

const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    },
    toChildrenData: {
        type: Object,
        default: ''
    }
})


watch(() => props.toChildrenData.id, () => {
    if (props.toChildrenData.id !== 0) {
        Object.assign(form, props.toChildrenData)
    } else {
        // 清空表单
        formRef.value?.resetFields()
    }
})

const emit = defineEmits(['hide'])

const form = reactive<IRoleModelTwo>({
    name: "",
    description: "",
    status: 1

})

const rules = {
    name: [{ required: true, trigger: "blur", message: "请填写角色名称" }],
    description: [{ required: true, trigger: "blur", message: "请填写描述" }]
}

const formRef = ref<FormInstance>();

// 添加
const addUser = () => {
    ElMessageBox.confirm("确定要添加角色吗？", "添加角色", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        createUser(form).then((res) => {
            if (res.code === 200) {
                emit("hide",true)
                // 清空表单
                formRef.value?.resetFields()
            }
        })
    })
}

// 编辑
const editUser = () => {
    ElMessageBox.confirm("确定要修改当前角色?", "修改角色", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        roleupDataUser(props.toChildrenData.id, form).then((res) => {
            if (res.code === 200) {
                ElMessage.success("修改成功")
                emit("hide")
                formRef.value?.resetFields()
            }
        })
    })
}

const submitFn = () => {
    formRef.value?.validate((ok: boolean) => {
        if (ok) {
            if (props.toChildrenData.id === 0) {
                addUser()
            } else {
                editUser()
            }
        }
    })

}
</script>
<style lang="less" scoped>

</style>